<!doctype html>
<html>

<head>
    <meta charset="utf-8" />
    <title>随机选取系统</title>

    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <style>
        @font-face {
            font-family: FZDaBiaoSong;
            src: url('./css/font.ttf');
            /* IE9+,可以是具体的实际链接 */
        }

        html,
        body {
            margin: 0;
            padding: 0;
        }

        body {
            font-family: "FZDaBiaoSong";
            background: url(background.jpg) no-repeat top center;
            background-size: cover;
        }

        container {
            padding: 0;
            margin: 0;
        }

        .lottery-section {
            width: 90%;
        }

        .lottery-section .lottery-title {
            text-align: center;
            /* color: rgb(250, 244, 8); */
            color: #000;
            font-size: 70px;
        }

        .user-name {
            color: #fff;
        }

        .lottery-section .btn {
            display: inline-block;
        }

        .btn-wrapper {
            text-align: center;
            position: relative
        }

        .j-btn-trash {
            position: absolute;
            right: 0;
            top: 0;
        }

        .user-name {
            font-size: 4em;
            min-height: 2em;
            line-height: 86px;
        }

        .user-name-item {
            background: rgba(0, 0, 0, 0.3);
            padding: 3px;
        }

        .user-name a {
            color: #FFF;
            cursor: pointer;
        }

        .winner-list {
            font-size: 20px;
        }

        .set-persion-num {
            font-size: 30px;
            color: #fff;
        }

        .set-persion-num input {
            width: 50px;
            text-align: center;
            color: #FFF;
            font-size: 40px;
            border: 0;
            outline: 0;
            background: transparent;
        }

        .static-bottom {
            position: absolute;
            bottom: 0;
        }

        .list-group .label {
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
        }

        .list-group-item {
            background-color: rgba(253, 190, 32, 0.59);
            border: 1px solid rgb(255, 85, 0);
            border-left: none;
            border-top: none;
            border-right: none;
            font-size: 30px;
        }

        .logo {
            text-align: center;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
        }

        .logo img {
            width: 450px;
            display: inline-block;
            position: relative;
            left: 0;
        }

        .row:first-child {
            position: relative;
        }

        .danghui {
            position: absolute;
            left: -50px;
            top: 50px;
            width: 300px;
        }
        #level-choose {
            font-size: 30px;
            text-align: center;
        }

        .hidden{
          opacity: 0;
        }
    </style>

</head>

<body>

    <div class="container lottery-section" class="clearfix">

        <div class="row" style="margin-bottom:30px;">
            <!-- <img class="danghui" src="danghui.png" alt=""> -->
            <div class="col-md-12">
                <!-- <h2 class="lottery-title">省行机关“迎七一”党章党规知识竞赛</h2> -->
                <h2 class="lottery-title">随机选取系统</h2>


            </div>
            <div class="col-md-12 text-right">
                <div class="set-persion-num">
                    每次选取<input class="j-set-persion-num" style=" " onchange="javascript:GET_COUNT=this.value; console.log(this.value);" />个

                </div>

            </div>
            

        </div>
        <div class="row">
            <div class="form-group" id="level-choose">
                <label class="radio-inline hidden">
                    <input type="radio" name="level" class="" value="1" checked>目录一
                </label>
                
                <!-- <label class="radio-inline">
                    <input type="radio" name="level" class="" value="2">目录二
                </label>

                <label class="radio-inline">
                    <input type="radio" name="level" class="" value="3" >目录三
                </label> -->
                
            </div>
        </div>
        <div class="row">

            <div class="col-md-12 btn-wrapper">
                <h2 class="user-name"></h2>
            </div>

        </div>
        <div class="row">
            <div class="col-md-4">

            </div>
            <div class="col-md-4 btn-wrapper">
                <button class="btn btn-primary j-btn-stop btn-lg">停止</button>
                <button class="btn btn-success j-btn-start btn-lg">抽取</button>
                <!-- <button class="btn btn-warning j-btn-trash btn-lg">无效</button> -->

            </div>
            <div class="col-md-4">

            </div>
        </div>
        <br />
        <div class="row" style="width:90%;margin:auto;">
            <div class="col-md-12 btn-wrapper">
                <ul class="list-group winner-list j-winner-list">
                </ul>

            </div>

        </div>
        <div class="row" style="text-align:right;">
            <button class="btn btn-danger j-btn-clear btn-lg ">清空</button>
        </div>
        <!-- <div class="row logo">
            <img src="logo.png" alt="">
        </div> -->
    </div>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="./js/bootstrap.min.js"></script>
    <script src="./conf.js"></script>
    <script src="./js/main.js"></script>
    <script>
        $(function(){
            var level = $("input[name='level']:checked").val();

            
        })
    </script>
</body>

</html>